<template>
  <div class="table">
    <Table size="small" border :columns="columns" :loading="loading" :data="data" stripe></Table>
    <div class="page-wrapper" v-if="pagination.count">
      <div class="des">
        显示第{{pagination.pageSize * (pagination.pageNo - 1) + 1}}到第{{pagination.pageSize * pagination.pageNo}}条记录，总共{{pagination.count}}条记录 每页显示
        <i-select class="select" :value="pagination.pageSize" @on-change="(pageSize) => handleChange('select', pageSize)" placeholder="请输入在用状态">
          <i-option :value="5">5</i-option>
          <i-option :value="10">10</i-option>
          <i-option :value="20">20</i-option>
          <i-option :value="50">50</i-option>
        </i-select>条记录
      </div>
      <Page
        :total="pagination.count"
        :current="pagination.pageNo"
        :page-size="pagination.pageSize"
        @on-change="(pageNo) => handleChange('page', pageNo)"
        class="pages"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pagination: {
      type: Object,
      default: {
        pageNo: 1,
        pageSize: 10,
        count: 0
      }
    },
    data: {
      type: Array,
      default: []
    },
    columns: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    console.log(this.pagination);
    return {
    }
  },
  methods: {
    pageChange(pg) {
      this.$emit('on-change', pg);
    },
    handleChange(type, pageValue) {
      const pagination = {...this.pagination}
      if (type === 'select') {
        pagination.pageNo = 1;
        pagination.pageSize = pageValue;
      } else if (type === 'page') {
        pagination.pageNo = pageValue;
      }
      this.$emit('on-change', pagination);
    }
  },
  watch: {
    pagination: {
      handler(n, o) {
      },
      deep: true
    }
  }
};
</script>

<style scoped lang="less">
.table {
    .page-wrapper {
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
        .des {
            display: flex;
            align-items: center;
            .select {
                width: 50px;
            }
        }
        .pages {
        }
    }
}
</style>